import XtxMessage from '@/components/message/message.vue'
import { h, render, onMounted } from 'vue'
type paramsType = {
  type: 'success' | 'warning' | 'error'
  text: string
  duration?: number
}

//创建一个盛放message的父容器
const divDom = document.createElement('div')
divDom.classList.add('xtx-message-box-content')
document.body.append(divDom)
let timeid = -1
export default function Message({ type, text, duration = 2000 }: paramsType) {
  // 1、创建虚拟dom
  const VNode = h(XtxMessage, { type, text })
  // 2、挂载
  render(VNode, divDom)
  // 3、延时一会蒋message从dom中移出
  clearTimeout(timeid)
  timeid = window.setTimeout(() => {
    render(null, divDom)
    // setTimeout(() => {
    //   document.body.removeChild(divDom)
    // }, 2000);
  }, duration);
}

Message.success = function (text: string, duration = 2000) {
  Message({
    type: 'success',
    text,
    duration
  })
}
Message.error = function (text: string, duration = 2000) {
  Message({
    type: 'error',
    text,
    duration
  })
}
Message.warning = function (text: string, duration = 2000) {
  Message({
    type: 'warning',
    text,
    duration
  })
}